<script lang="ts" setup>
/* 
怎么查找到事件的类型，或者dom
都是通过 document.addEventListener('事件名',()=>{}),利用代码提示，找到对应的事件类型，复制即可
document.querySelector('标签名')
*/

import { onMounted, ref } from 'vue';

// document.querySelector('div')
const divRef = ref<HTMLDivElement | null>(null)
onMounted(
    () => {
        console.log('divRef.value -----> ', divRef.value);
        // if (divRef.value) {
        //     divRef.value.innerHTML = '大家跟我喊，传智播客，yyds'
        // }

        // 非空断言，!,ts的类型，告诉ts这个对象不可能为空
        divRef.value!.innerHTML = '大家跟我喊，传智播客，yyds'

        // 可选链操作符 ?. ，js原生，保证读取属性时候，不会报错，能读到正常返回，不能读倒返回undefined
        // 注意，可选链操作符只能读取，不能赋值
        // 应用场景：一般都是在页面渲染时使用，判断条件没问题
        // divRef.value?.innerHTML = '大家跟我喊，传智播客，yyds'
    }
)
</script>

<template>
    <div ref="divRef">我是vue3-ts</div>
</template>